<template>
  <div class="books">
      <div class="row">
      <div v-for="(b,i) in books" :key="i" class="col-md-3 col-xs-12 item">
        <img :src="b.img" alt="b.title">
        <h5>{{b.title}}</h5>
      </div>
    </div>
  </div>
</template>
<script>
import ertong from '../data/book_ertong';
import dongman from '../data/book_dongman';
import lishi from '../data/book_lishi';
import qingchunwenxue from '../data/book_qingchunwenxue';

export default {
  name: 'Books',
  data() {
    return {
      d: '',
      books: [], // 当前所有的书籍数据
    };
  },
  created() { // 组件创建完成之后，组件没有被卸载就不会重新创建
    this.d = this.$route.params.type;
    this.initDate();
  },
  watch: {
    $route() { // 监听$route(路由地址信息)的变化
      this.d = this.$route.params.type;
      this.initDate();
    },
  },
  methods: {
    initDate() {
      switch (this.d) {
        case 'ertong':
          this.books = ertong;
          break;
        case 'dongman':
          this.books = dongman;
          break;
        case 'lishi':
          this.books = lishi;
          break;
        case 'qingchunwenxue':
          this.books = qingchunwenxue;
          break;
        default:
          this.books = [];
          break;
      }
    },
  },
};
</script>

<style>
.item h5{
  text-align: center;
}
.item img{
  margin: 0 auto;
  display: block;
}
.item{
  height: 280px;
}
</style>
